<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:jsf="http://xmlns.jcp.org/jsf"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:p="http://primefaces.org/ui">

    <!-- TIENDA -->
    <div jsf:rendered="#{inputProductController.secondWizard eq 2}" >
        <div align="center">
            <h3>EMPRESA: #{inputProductController.shop.companyId.name}</h3>
        </div>
        <hr/>
        <div class="row">
            <div class="col-lg-4">
                <h5>* RUC: <strong>#{inputProductController.shop.companyId.ruc}</strong></h5>
                <h5>* TIENDA: <strong>#{inputProductController.shop.name}</strong></h5>
            </div>
            <div class="col-lg-4">
                <h5>* TELÉFONO: <strong>#{inputProductController.shop.phone}</strong></h5>
                <h5>* DIRECCIÓN: <strong>#{inputProductController.shop.address}</strong></h5>
            </div>
            <div class="col-lg-4">
                <h5>* CONTACTO: <strong>#{inputProductController.shop.contact}</strong></h5>
            </div>
        </div>
        <hr/>
    </div>
    <!-- END TIENDA -->
    <!-- ALMACÉN -->
    <div jsf:rendered="#{inputProductController.secondWizard eq 1}" >
        <div align="center">
            <h3>ALMACÉN: #{inputProductController.storehouse.name}</h3>
        </div>
        <hr/>
        <div class="row">
            <div class="col-lg-6">
                <h5>* DIRECCIÓN: <strong>#{inputProductController.storehouse.address}</strong></h5>
            </div>
            <div class="col-lg-6">
                <h5>* TELÉFONO <strong>#{inputProductController.storehouse.phone}</strong></h5>
            </div>
        </div>
        <hr/>
    </div>
    <!-- END ALMACÉN -->

    <!-- CREACIÓN DEL LLENADO PARA PRODUCTOS NUEVOS. SE TIENE QUE VER EL PROVEEDOR -->
    <h:form>
        <div class="row">
            <div class="col-lg-4">
                <div class="input-group">
                    <span class="input-group-addon">DOCUMENTO </span>
                    <h:selectOneMenu styleClass="form-control" value="#{inputProductController.inputDocument.typeDocument}">
                        <f:selectItem itemLabel="FACTURA" itemValue="FACTURA"/>
                        <f:selectItem itemLabel="BOLETA" itemValue="BOLETA"/>
                        <f:selectItem itemLabel="GUIA" itemValue="GUIA"/>
                    </h:selectOneMenu>
                </div>

            </div>
            <div class="col-lg-4">
                <div class="input-group">
                    <span class="input-group-addon">Nº DOCUMEN</span>
                    <input type="text" class="form-control" 
                           jsf:value="#{inputProductController.inputDocument.numberDocument}"
                           placeholder="ejemplo: 00005" maxlength="5"/>
                </div>
            </div>
            <div class="col-lg-4" align="right">
                <div class="input-group">
                    <span class="input-group-addon">MONEDA </span>
                    <h:selectOneMenu styleClass="form-control" value="#{inputProductController.inputDocument.typeMoney}">
                        <f:selectItem itemLabel="SOLES" itemValue="SOLES"/>
                        <f:selectItem itemLabel="DOLARES" itemValue="DOLARES"/>
                        <f:selectItem itemLabel="EUROS" itemValue="EUROS"/>
                    </h:selectOneMenu>
                </div>

            </div>
        </div>
        <br/>

        <div class="row">

            <div class="col-lg-6">
                <div class="input-group">
                    <span class="input-group-addon">PROVE</span>
                    <h:selectOneMenu styleClass="form-control" converter="entityConverter" 
                                     value="#{inputProductController.inputDocument.providerId}">
                        <f:selectItem itemLabel="SELECCIONE UN PROVEEDOR" />
                        <f:selectItems value="#{inputProductController.listProvider}" var="provi"
                                       itemLabel="#{provi.name}" itemValue="#{provi}" />
                    </h:selectOneMenu>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="input-group">
                    <span class="input-group-addon">FECHA </span>
                    <p:calendar class="form-control" locale="es" size="30" 
                                value="#{inputProductController.inputDocument.inputDate}"
                                placeholder="Fecha de Compra" pattern="dd-MM-yyyy HH:mm"
                                navigator="true"/>
                </div>
            </div>
        </div>
        <hr/>


        <div class="row">
            <div class="col-lg-4">
                <div class="input-group" style="width: 150px;">
                    <span class="input-group-addon">IGV.</span>
                    <input type="text" jsf:value="#{inputProductController.inputDocument.igv}" 
                           class="form-control" >
                        <p:ajax event="blur"
                                update="tableForm" />
                    </input>
                    <span class="input-group-addon">%</span>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="input-group" style="width: 300px;">
                    <span class="input-group-addon">Tipo:</span>
                    <h:selectOneMenu value="#{inputProductController.typeSaleDocument}" styleClass="form-control">
                        <f:selectItem itemLabel="AL CONTADO" itemValue="1"/>
                        <f:selectItem itemLabel="AL CREDITO" itemValue="2"/>
                    </h:selectOneMenu>
                </div>
            </div>
            <div class="col-lg-4" align="right">
                <p:commandLink styleClass="btn btn-default btn-primary" update=":panelContent"
                               action="#{inputProductController.initValuesSelectProduct()}" ajax="false">
                    <i class="glyphicon glyphicon-search"/>
                    AÑADIR PRODUCTO
                    <f:setPropertyActionListener
                        target="#{navigationController.navigationContent}"
                        value="./pages/operation/register_product/forms/product_select.xhtml" />
                </p:commandLink>
            </div>
        </div>

        <hr/>

        <div class="row">

            <p:dataTable emptyMessage="No ha añadido ningún producto." id="tableForm"
                         value="#{inputProductController.inputDocument.detailInputDocumentList}" 
                         var="detail">
                <f:facet name="header">
                    LISTA DE PRODUCTOS ACTUALMENTE
                </f:facet>
                <p:column width="5">
                    <p:menuButton styleClass="menubutton-for-table">  
                        <p:menuitem value="Eliminar" icon="ui-icon-trash" update="tableForm"
                                    action="#{inputProductController.removeOfListProduct(detail)}"> 
                        </p:menuitem>
                    </p:menuButton>
                </p:column>
                <p:column headerText="Cantidad" width="10">
                    #{detail.amount}
                </p:column>
                <p:column headerText="Nombre o Descripción">
                    #{detail.productId.name}
                </p:column>
                <p:column headerText="Etiquitas">
                    <div align="center" jsf:rendered="#{detail.productId.categoryId.name != null}">
                        CATEGORIA[<strong>#{detail.productId.categoryId.name}</strong>] 
                    </div>
                    <div align="center" jsf:rendered="#{detail.productId.categoryId.name != null}">
                        UNIDAD[<strong>#{detail.productId.unitTypeId.name}</strong>] 
                    </div>
                    <div align="center" jsf:rendered="#{detail.productId.categoryId.name != null}">
                        MARCA[<strong>#{detail.productId.markId.name}</strong>] 
                    </div>
                </p:column>
                <p:column headerText="P.U" width="90">
                    #{detail.priceUnit}
                </p:column>
                <p:column headerText="Sub Total" width="90">
                    #{detail.subTotal}
                </p:column>

                <p:columnGroup type="footer" >   
                    <p:row>  
                        <p:column colspan="5" footerText="SUB TOTAL" style="text-align:right"  />  
                        <p:column footerText="#{inputProductController.inputDocument.subTotal}" style="text-align:center"  />
                    </p:row>  
                    <p:row>  
                        <p:column colspan="5" footerText="IGV" style="text-align:right"  />  
                        <p:column footerText="#{inputProductController.inputDocument.igv} %" style="text-align:center"  />
                    </p:row> 
                    <p:row>  
                        <p:column colspan="5" footerText="TOTAL"  
                                  style="text-align:right"  />  
                        <p:column footerText="#{inputProductController.inputDocument.total}"  
                                  style="text-align:center"  />
                    </p:row> 
                </p:columnGroup>  
            </p:dataTable>

        </div>
        <hr/>
        <div class="row" align="right">
            <p:commandLink styleClass="btn btn-default btn-primary" update="@form"
                           action="#{inputProductController.saveOrUpdateInputDocument()}">
                <i class="glyphicon glyphicon-hdd"/>
                GUARDAR
            </p:commandLink>
        </div>

    </h:form>

    <p:dialog modal="true" appendTo="@(body)" header="Guardar Deuda"
              widgetVar="deuda" id="deudaId">
        <h:form id="other">

            <h:outputText value="Total Deuda:"/>
            <p:inputText value="#{inputProductController.accountForPay.amount}" styleClass="form-control"/>

            <br/>
            <h:outputText value="Estado:"/>

            <p:inputText value="#{inputProductController.accountForPay.state}" styleClass="form-control"/>

            <br/>
            <h:outputText value="Tipo de Moneda:"/>
            <p:outputLabel value="#{inputProductController.accountForPay.typeMoney}" styleClass="form-control"/>

            <br/>
            <h:outputText value="Fecha de Fin de Pago:"/>
            <p:calendar value="#{inputProductController.accountForPay.endDatePay}" styleClass="form-control"/>


            <br/>
            <p:commandButton value="GUARDAR" action="#{inputProductController.saveAccountForPay()}"/>
        </h:form>
    </p:dialog>
</ui:composition>
